<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据字典表</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="/admin/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
    <link href="/admin/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
    <link href="/admin/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="/admin/css/animate.min.css" rel="stylesheet">
    <link href="/admin/css/style.min862f.css?v=4.1.0" rel="stylesheet">
    <link href="/admin/frame/iconfont/iconfont.css" rel="stylesheet"/>
    <%-- <link href="/admin/frame/css/layout.css" rel="stylesheet"/>--%>
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="ibox float-e-margins">
        <div class="ibox-title">
            <h5>
                <ol class="breadcrumb br-0">
                    <li><a href="javascript:void(0)">字典管理</a></li>
                    <li class="active">数据字典</li>
                </ol>
            </h5>
            <div class="ibox-tools">
                <a class="collapse-link">
                    <i class="fa fa-chevron-up"></i>
                </a>
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                    <i class="fa fa-wrench"></i>
                </a>
                <ul class="dropdown-menu dropdown-user">
                    <li>
                        <a href="#">选项1</a>
                    </li>
                    <li>
                        <a href="#">选项2</a>
                    </li>
                </ul>
                <a class="close-link">
                    <i class="fa fa-times"></i>
                </a>
            </div>
        </div>
        <div class="ibox-content">
            <div class="row">
                <div class="col-md-12">
                    <div class="form-horizontal">
                        <div class="col-md-4 col-sm-6 col-xs-12">
                            <form class="form-group" data-queryType="search">
                                <label class="hidden-xs col-md-3 col-sm-4 control-label">查询：</label>
                                <div class="col-md-9 col-sm-8">
                                    <div class="input-group">
                                        <input type="text" name="searchKey" class="form-control" placeholder="请输入搜索关键字">
                                        <span class="input-group-btn">
                            					 <button class="btn btn-primary queryform_btn"  type="button">搜索</button>
                          				   </span>
                                    </div>
                                </div>
                            </form>
                        </div>

                        <div class="col-md-4 col-sm-12 col-xs-12">
                            <form class="form-group" data-queryType="screen">
                                <label class="hidden-xs col-md-3 col-sm-3 control-label">筛选：</label>
                                <div class="col-md-9 col-sm-8col-xs-12">
                                    <div class="input-group">
                                        <select class="form-control" name="map[tb.dict_type_id]">
                                            <c:forEach items="${typeList}" var="item">
                                                <option value="${item.id}">${item.typeName}</option>

                                            </c:forEach>
                                        </select>
                                        <span class="input-group-btn">
                              <button class="btn btn-primary queryform_btn"  type="button">筛选</button>
                             </span>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="col-md-1 col-sm-4 col-xs-12">
                            <a href="/Admin/App/AppDictCode/addPage" class="modaljump btn btn-primary">添加字典</a>
                        </div>

                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <table id="tb_departments" >

                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<script src="/admin/frame/jquery/jquery-1.9.1.min.js"></script>
<script src="/admin/frame/bootstrap/js/bootstrap.min.js"></script>
<script src="/admin/frame/bootstrap-table/bootstrap-table.min.js"></script>
<script src="/admin/frame/bootstrap-table/bootstrap-table-mobile.min.js"></script>
<script src="/admin/js/content.min.js?v=1.0.0"></script>
<script src="/admin/frame/layer/laydate/laydate.js"></script>
<script src="/admin/js/myPlug.js"></script>
<script src="/admin/frame/layer/layer.js"></script>
<script src="/admin/js/mytable.js"></script>
<script src="/admin/js/init.js"></script>
</body>
<script>
    $(function () {
        // dateAssemblyInit();// 初始化日期控件
        var oTable = new TableInit();
        oTable.Init();//初始化表格
        oTable.queryInit();//初始化查询事件绑定
    });

    var TableInit = function () {
        var oTableInit = {};
        //初始化Table
        oTableInit.Init = function () {
            $('#tb_departments').bootstrapTable({
                url: '/Admin/AppDictCode/query', //请求后台的URL（*）
                method: 'get', //请求方式（*）
                contentType: 'application/json',
                toolbar: '#toolbar', //工具按钮用哪个容器
                striped: false, //是否显示行间隔色
                cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: true, //是否显示分页（*）
                sortable: true, //是否启用排序
                sortOrder: "asc", //排序方式
                sortName: "id",//排序字段
                queryParams: oTableInit.queryParams,//传递参数（*）
                sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
                pageNumber: 1, //初始化加载第一页，默认第一页
                pageSize: 10, //每页的记录行数（*）
                pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
                search: false, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
                strictSearch: false,
                showColumns: true, //是否显示所有的列
                showRefresh: false, //是否显示刷新按钮
                minimumCountColumns: 2, //最少允许的列
                clickToSelect: true, //是否启用点击选中行
                //  height: 500,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                uniqueId: "id", //每一行的唯一标识，一般为主键列
                showToggle: false, //是否显示详细视图和列表视图的切换按钮
                cardView: false, //是否显示详细视图
                detailView: false, //是否显示父子表
                detailFormatter: function (index, row) { //详情格式化
                    return row.toString();
                },
                paginationPreText: "上一页",
                paginationNextText: "下一页",
                showFooter: false, //是否显示页脚
                rowStyle: function (row, index) {
                    console.log(row);
                    return {};
                },
                columns: [
                    {
                        field: 'id',
                        title: '编号',
                        align: "center",
                        sortable: true,
                        sortName: "id",
                        formatter: function (value, row, index) {
                            return value;

                        }
                    },
                        {
                            field: 'dkey',
                            title: '关键字',
                            align: "center",
                            sortable: true,
                            sortName: "dkey",
                            formatter: function (value, row, index) {
                            return value;
                        }},
                        {
                            field: 'appDictCodeType.typeName',
                            title: '字典类型',
                            align: "center",
                            sortable: true,
                            sortName: "dictTypeId",
                            formatter: function (value, row, index) {
                            return value;
                        }},
                        {
                            field: 'dvalue',
                            title: '关键值',
                            align: "center",
                            sortable: true,
                            sortName: "dvalue",
                            formatter: function (value, row, index) {
                            return value;
                        }},
                        {
                            field: 'orders',
                            title: '排序',
                            align: "center",
                            sortable: true,
                            sortName: "orders",
                            formatter: function (value, row, index) {
                            return value;
                        }},
                    {
                        field: 'id',
                        title: '操作',
                        align: "center",
                        width:"180px",
                        formatter: function (value, row, index) {
                            {
                                var detail_str='<a href="/Admin/App/AppDictCode/detailPage?id=' + value + '" class="ml-5 btn btn-white btn-xs modaljump"  type="button" ><i class="iconfont ft-12"  style="font-size: 12px; line-height:12px;color:green">&#xe678;</i>查看</a>';
                                var edit_str='<a href="/Admin/App/AppDictCode/updatePage?id=' + value + '" class="ml-5 btn btn-white btn-xs modaljump"  type="button" ><i class="iconfont ft-12"  style="font-size: 12px; line-height:12px;color:rgb(230,126,34);">&#xe635;</i>编辑</a>';
                                var del_str='<a  href="/Admin/App/AppDictCode/delete?id=' + value + '" class="ml-5 btn btn-white btn-xs nojump confirm"  type="button" data-callback="$.mytable.removeRow" ><i class="iconfont ft-12"  style="font-size: 16px; line-height:16px;color: red;">&#xe632;</i>删除</a>';

                                return edit_str;
                            }

                        }
                    }
                ]

            });
        };
        //获取查询参数
        oTableInit.queryParams = function (params) {
            var querfrom=$("form[data-isquery='current_query']").eq(0);
            var temp = querfrom.serializeJson();
            temp.pageSize = params.limit;
            temp.currentPage = params.offset / params.limit + 1;
            temp.sort = params.sort;
            temp.order = params.order;
            temp.type = querfrom.attr("data-querytype");
            if(temp.type=="filter")
            {
                temp.filterName=querfrom.attr("data-filterAttrName");
                if(temp.filterName==undefined||temp.filterName==""||temp.startValue==undefined||temp.endValue=="")
                {
                    temp.type="";
                }
            }
            return temp;
        };
        oTableInit.queryInit=function () {
            $("button.queryform_btn").on("click", function () {
                $("form").attr("data-isquery","");
                var querfrom= $(this).parents("form").eq(0).attr("data-isquery","current_query");
                $('#tb_departments').bootstrapTable('refresh');

            });

        }
        return oTableInit;
    };
    //定义日期选择器插件
    function dateAssemblyInit() {
        var start = {
            elem: "#start",
            format: "YYYY/MM/DD",
            min: "2017-01-01 00:00:01",
            max: laydate.now(),
            istime: false,
            istoday: false,
            choose: function(datas) {
                end.min = datas;
                end.start = datas
            }
        };
        var end = {
            elem: "#end",
            format: "YYYY/MM/DD",
            min: "2017-01-01 00:00:01",
            max: laydate.now(1),
            istime: false,
            istoday: false,
            choose: function(datas) {
                start.max = datas
            }
        };
        laydate(start);
        laydate(end);
    }
</script>
</html>
